<template>
	<view class="">
		<view class="bg-img bg-mask flex align-center"
			style="background-image: url('../../static/img/personal-bg.jpg');height: 414upx;">
			<view class="padding-xl text-white head-card middle">

				<view class="cu-avatar xl round bg-gray" 
					style="background-image:url('../../static/img/missing-face.png');">
				</view>

				<view class="padding-xs text-lg">
					{{userInfo.username || ""}}
				</view>
			</view>
			<view class=" memu-box-yue  card-menu sm-border">
				<view class="" :class="menuArrow?'arrow':''">
					<view class="">
						<text class="cuIcon-moneybagfill "></text>
						<text class=" padding-sm">余额：{{userInfo.balance || "0"}}元</text>
						<text class=" padding-sm">奖金：{{userInfo.bonus || "0"}}元</text>
					</view>
				</view>
			</view>
			<text class="cuIcon-settings text-white seting" @click="jumpTo('set')"></text>
		</view>

		<view class="cu-list memu-box margin-top grid bg-white" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item bg-white" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2"
				@click="jumpTo(item.type)">
				<view class="iconfont" :class="['icon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>

		<scroll-view scroll-y="true" style="height: 50vh;">
			<view class="cu-list menu margin-top card-menu sm-border">
				<view class="cu-item" :class="menuArrow?'arrow':''" @click="jumpTo('order')">
					<view class="content">
						<text class="cuIcon-text text-grey"></text>
						<text class="text-grey">我的订单</text>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''" @click="jumpTo('order')">
					<view class="content">
						<text class="cuIcon-news text-grey"></text>
						<text class="text-grey">资金明细</text>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''" >
					<view class="content">
						<text class="cuIcon-qrcode text-grey"></text>
						<text class="text-grey">邀请码 </text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">{{code}}</text>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''" @click="jumpTo('verison')">
					<view class="content">
						<text class="cuIcon-link text-grey"></text>
						<text class="text-grey">版本更新 </text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">v1.0.0</text>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''" @click="jumpTo('set')">
					<view class="content">
						<text class="cuIcon-settings text-grey"></text>
						<text class="text-grey">设置</text>
					</view>
				</view>

			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "myself",
		data() {
			return {
				userInfo:{
					
				},
				cuIconList: [{
					cuIcon: 'chongzhi',
					color: 'red',
					badge: 0,
					type: "Recharge",
					name: '充值'
				}, {
					cuIcon: 'zhuankuan',
					color: 'orange',
					badge: 0,
					name: '转充',
					type: "Recharging",
				}, {
					cuIcon: 'tixian',
					color: 'yellow',
					badge: 0,
					name: '提现',
					type: "reflect",
				}],
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				code:'',//邀请码
			}
		},

		onShow() {
			this.selectCode();
			this.getuser();
		},
		methods: {
			getuser(){
				this.$Reques.request(this.$Reques.interface_url.userInfo, "GET", "").then((res) => {
					
					if (res.status == 200) {
						this.userInfo=res.data;
					}else{
						this.$Reques.showToast(res.message);
					}
				})
			},
			selectCode(){
				this.$Reques.request(this.$Reques.interface_url.selectCode, "GET", "").then((res) => {
					
					if (res.status == 200) {
						this.code=res.data.code;
					}else{
						this.$Reques.showToast(res.message);
					}
				})
			},
			jumpTo(...dat) {
				let url="";
				switch (dat[0]) {
					case "Recharge":
					 url="/pages/user/Recharge";
					break;
					case "Recharging":
					 url="/pages/user/Recharging";
					break;
					case "reflect":
					 url="/pages/user/reflect";
					break;
					case "order":
					 // url="/pages/order/order";
					break;
					case "set":
					url="/pages/user/set"
					break;
					case "verison":
					
					uni.showToast({
						title:"最新版本",
						icon:"none"
					})
					
					return false;
					
					break;
					
					default:
					uni.showToast({
						title:"开发中",
						icon:"none"
					})
					
					break;
				}
				
				uni.navigateTo({
					url: url
				})
			}

		}
	}
</script>

<style scoped>
	@import "@/static/font/iconfont.css";
	.bg-img {
		z-index: 0;
		position: relative;
	}
	.iconfont{
		font-weight: 600;
		font-size: 45rpx;
	}

	.memu-box-yue {
		position: absolute;
		bottom: 1%;
		width: 92%;
		height: 80rpx;
		display: flex;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
		margin-left: 4%;
		border-radius: 20rpx;
		padding-left: 20rpx;
		color: #F2D587;
		opacity: 0.8;

	}

	.memu-box {
		width: 92%;
		position: relative;
		z-index: 99;
		margin: 0 auto 0;
		border-radius: 20rpx;
	}

	.memu-box>view {
		position: relative;
	}

	.head-card {
		display: flex;
		flex-direction: row;
	}
	.seting{
		position: absolute;
		right: 5vw;
		top: 7vh;
		z-index: 9;
		font-size: 45rpx;
	}
</style>
